<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <style>
        :focus {
            outline: 2px solid white;
        }

        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            border: 0;
            outline: none;

            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .container {
            width: 1080px;
            height: 720px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .episodes {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: rgba(0, 0, 0, 0.1);
            height: 160px;
        }

        .episode {
            flex: none;

            width: 150px;
            height: 120px;
            margin-left: 20px;
            margin-top: 20px;

            background-color: rgba(0, 0, 0, 0.1);
        }

        .episode:first-of-type {
            margin-left: 40px;
        }

        .functions {
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .function {
            flex: none;
            width: 200px;
            height: 50px;
            margin: 0 10px;
            background-color: rgba(0, 0, 0, 0.1);

            font-size: 1.6rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="episodes">
        </div>
        <div class="functions">
            <div class="fullscreen function focusable">全屏</div>
            <div class="back function focusable">返回</div>
        </div>
    </div>

    <!-- <script src="js/spatial_navigation.js"></script> -->
    <script src="https://luke-chang.github.io/js-spatial-navigation/spatial_navigation.js"></script>
    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        window.addEventListener('load', function () {
            // initSN() 
            getEpisodes()
        })

        // 初始化SN
        const initSN = () => {
            // Initialize
            SpatialNavigation.init();

            // Define navigable elements (anchors and elements with "focusable" class).
            SpatialNavigation.add({
                id: 'episodes',
                selector: '.episodes .focusable'
            })
            SpatialNavigation.add({
                id: 'functions',
                selector: '.functions .focusable'
            })

            // Make the *currently existing* navigable elements focusable.
            SpatialNavigation.makeFocusable();

            // Focus the first navigable element.
            SpatialNavigation.focus('episodes');
        }

        // 获取播放列表，不包含视频地址
        const getEpisodes = () => {
            // 获取播放列表
            const url = 'http://m.guliguli.com/index.php?g=QinbaoTv&m=Index&a=album&cid=98&page=1&limit=6'
            fetch(url)
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    return data.data
                })
                .then(album => {
                    album.list.row.forEach(episode => {
                        // console.log(episode)
                        let s = `<div class="episode focusable" data-video-id="${episode.id}" style="background-image: url('${episode.thumb}');"></div>`
                        document.querySelector('.episodes').innerHTML += s
                    })
                    //
                    initSN()
                    //
                    bindSNEvents()
                })
                .catch(err => {
                    console.error(err)
                })
        }

        const bindSNEvents = () => {
            $('.episode.focusable')
                // 获取该视频的播放地址
                .on('sn:willfocus', function () {
                    // console.log(this)
                    // console.log(event)
                    if ($(this).data('smooth-url')) {
                    } else {
                        const video_id = $(this).data('video-id')
                        const url = `http://m.guliguli.com/index.php?g=QinbaoTv&m=Index&a=play&video_id=${video_id}`
                        fetch(url)
                            .then(response => {
                                return response.json()
                            })
                            .then(data => {
                                return data.data
                            })
                            .then(episode => {
                                console.log(episode)
                                $(this).data('smooth-url', episode.smooth_url)
                            })
                            .catch(err => {
                                console.error(err)
                            })
                        // console.log(this)
                    }
                })
                // 播放该视频
                .on('sn:enter-up', function () {
                    play($(this).data('smooth-url'))
                })

            $('.back.focusable')
                .on('sn:enter-up', function () {
                    back()
                })

            $('.fullscreen.focusable')
                .on('sn:enter-up', function () {
                    fullscreen()
                })
        }

        // TODO
        // play方法
        // 传入了视频地址
        function play(url) {
            // console.log(url)
            alert(url)
        }

        function back() {
            alert('返回')
        }

        function fullscreen() {
            alert('全屏')
        }
    </script>
</body>

</html>